import { ProFormDatePicker, ProFormList } from '@ant-design/pro-components';
import {
  Avatar,
  Button,
  Col,
  Divider,
  Drawer,
  List,
  Row,
  Descriptions,
  Tooltip,
  Popconfirm,
  message,
} from 'antd';
import React, { Component } from 'react';
import { connect } from 'umi';
import UserForm from './userForm';
import { MinusCircleOutlined } from '@ant-design/icons';
const DescriptionItem = ({ title, content }) => (
  <div className="site-description-item-profile-wrapper">
    <p className="site-description-item-profile-p-label">{title}:</p>
    {content}
  </div>
);

class DetectorPushEmial extends Component {
  componentDidMount() {
    this.userForm = React.createRef();
  }

  DrawerColse() {
    const { dispatch } = this.props;
    dispatch &&
      dispatch({
        type: 'detectorManage/changeDrawerStatus',
        payload: {},
      });
  }

  //新增设备推送用户
  submitUserInfo() {
    //this.userForm是本层的引用组件实例
    //定义userForm是获取下一层的Form表单实例，需求区别开来
    const userForm = this.userForm.current.userForm;
    let FormValues = {};
    try {
      const getFormData = userForm.current.getFieldsValue();
      FormValues = { ...getFormData };
    } catch (e) {
      FormValues = undefined;
    }

    const { dispatch, deviceDrawerDetail } = this.props;
    const { users } = FormValues;
    dispatch &&
      dispatch({
        type: 'detectorManage/submitDetectorPushUserInfoById',
        payload: {
          id: deviceDrawerDetail.id,
          users,
        },
        callback: (res) => {
          //表单置为初始状态
          userForm.current.setFieldsValue({ users: [] });
          debugger;
          this.props.handleRefreshData();
        },
      });
  }

  //删除设备推送用户信息
  DeleteDetectorUserInfo(deviceDrawerDetail, user) {
    const { dispatch } = this.props;
    dispatch &&
      dispatch({
        type: 'detectorManage/deleteDetectorUser',
        payload: {
          id: deviceDrawerDetail.id,
          user,
        },
        callback: (res) => {
          if (res.code == 200) {
            message.success('删除成功');
            //重新刷新列表
            this.DrawerColse();
            this.props.handleRefreshData();
            //重新打开Drawer表单，//预留出来，接口联调后优化
            // this.updateDrawerDetail(deviceDrawerDetail)
          } else {
            message.error(res.message);
          }
        },
      });
  }

  //删除用户后列表需要更新,根据原来的id重新查询
  // updateDrawerDetail(deviceDrawerDetail) {
  //   const { dispatch } = this.props
  //   dispatch && dispatch({
  //     type: 'detectorManage/updateDrawerDetail',
  //     payload: deviceDrawerDetail,
  //   }
  //   )
  // }

  render() {
    const { drawerVisible, deviceDrawerDetail } = this.props;
    //获取设备的管理者信息
    const { users } = deviceDrawerDetail;
    return (
      <Drawer
        width={700}
        placement="right"
        title={'设备异常消息推送用户管理'}
        headerStyle={{ color: 'red' }}
        onClose={() => this.DrawerColse()}
        closable={false}
        open={drawerVisible}
        footer={
          <div style={{ float: 'right' }}>
            <Button
              type="primary"
              onClick={() => {
                this.submitUserInfo();
              }}
            >
              提交
            </Button>
            <Button
              onClick={() => {
                this.DrawerColse();
              }}
            >
              取消
            </Button>
          </div>
        }
      >
        {users &&
          users.map((item, index) => {
            return (
              <div key={index}>
                <Descriptions
                  title={
                    <div>
                      <div>{'设备管理者 ' + `${index + 1}`}</div>
                      <div
                        style={{
                          float: 'right',
                          padding: '0',
                          marginTop: '-20px',
                          marginRight: '40px',
                        }}
                      >
                        <Popconfirm
                          style={{ padding: 0, margin: '0' }}
                          title="删除此用户"
                          description="确认是否删除此用户?"
                          onConfirm={() => {
                            this.DeleteDetectorUserInfo(deviceDrawerDetail, item);
                          }}
                          okText="确认"
                          cancelText="取消"
                        >
                          <Tooltip style={{ margin: 0 }}>
                            <MinusCircleOutlined />
                          </Tooltip>
                        </Popconfirm>
                      </div>
                    </div>
                  }
                  bordered={true}
                  column={2}
                >
                  {/* <Descriptions.Item label="用户编号">{item.userId} </Descriptions.Item> */}
                  <Descriptions.Item label="姓名">{item.userName} </Descriptions.Item>
                  <Descriptions.Item label="推送邮箱">{item.email}</Descriptions.Item>
                  <Descriptions.Item label="推送电话">{item.telephone}</Descriptions.Item>
                  <Descriptions.Item label="所在地址">{item.address}</Descriptions.Item>
                </Descriptions>
                <Divider />
              </div>
            );
          })}
        <Row>
          <UserForm ref={this.userForm} />
        </Row>
      </Drawer>
    );
  }
}

export default connect(
  ({ detectorManage, userManage }) => ({
    deviceDrawerDetail: detectorManage.deviceDrawerDetail,
    drawerVisible: detectorManage.drawerVisible,
    users: userManage.users,
  }),
  (dispatch) => {
    return { dispatch };
  },
  null,
  { forwardRef: true },
)(DetectorPushEmial);
